<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick } from "vue";
import { getProductListOnSale } from "@/api/product";
import { getProductImageList } from "@/api/productImage";
import { Search } from "@element-plus/icons-vue";

const farmProductsDetail = ref(null);
// 请求参数
const params = reactive({
  current: 1,
  size: 6,
  keyword: "",
});

// 状态管理
const isLoading = ref(false);
const noMoreData = ref(false);
const productList = ref([]);
const productImageList = ref([]);
const scrollDebugInfo = ref({});
// 关键：获取 .farm-products 容器的DOM引用
const farmProductsRef = ref(null);

// 获取商品列表（逻辑不变）
const getList = async () => {
  if (isLoading.value) return;
  isLoading.value = true;
  const res = await getProductListOnSale(params);
  const newData = res.data?.data?.data || [];

  if (newData.length === 0) {
    noMoreData.value = true;
    return;
  }

  const startIndex = productList.value.length;
  newData.forEach(() => {
    productImageList.value.push([]); // 每个新商品对应一个空图片数组
  });
  productList.value = [...productList.value, ...newData];

  const imagePromises = newData.map((item) =>
    getProductImageList(item.productId)
  );
  const imageResults = await Promise.all(imagePromises);
  imageResults.forEach((imgRes, idx) => {
    productImageList.value[startIndex + idx] = imgRes.data?.data || [];
  });

  isLoading.value = false;
};

// 初始化加载（逻辑不变）
getList();

// 搜索功能（逻辑不变）
const onSearch = () => {
  params.current = 1;
  productList.value = [];
  productImageList.value = [];
  noMoreData.value = false;
  getList();
};

// 重置功能（逻辑不变）
const restore = () => {
  params.keyword = "";
  onSearch();
};

// 关键修改1：滚动事件处理（基于容器计算滚动参数）
const handleScroll = () => {
  // 1. 先获取容器DOM，防止未挂载时报错
  const container = farmProductsRef.value;
  if (!container || isLoading.value || noMoreData.value) return;

  // 2. 计算容器内部的滚动参数（核心区别：用容器代替window）
  const scrollTop = container.scrollTop; // 容器已滚动的距离（顶部）
  const clientHeight = container.clientHeight; // 容器可视区域高度
  const scrollHeight = container.scrollHeight; // 容器内容总高度（包括不可见部分）
  const distanceToBottom = scrollHeight - scrollTop - clientHeight; // 距离容器底部的距离

  if (distanceToBottom <= 10) {
    load();
  }
};

// 加载更多（逻辑不变）
const load = () => {
  params.current++;
  getList();
};

// 关键修改2：生命周期绑定/解绑容器滚动事件
onMounted(() => {
  // 1. 确保容器DOM已挂载（用nextTick更稳妥）
  nextTick(() => {
    const container = farmProductsRef.value;
    if (container) {
      // 2. 绑定事件到容器，而非window
      container.addEventListener("scroll", handleScroll, { passive: true });
      console.log("容器滚动事件已监听");
    }
  });
});

onUnmounted(() => {
  // 3. 解绑容器事件（防止内存泄漏）
  const container = farmProductsRef.value;
  if (container) {
    container.removeEventListener("scroll", handleScroll);
    console.log("容器滚动事件已移除");
  }
});
</script>

<template>
  <!-- 关键修改3：给 .farm-products 加 ref 引用，用于获取DOM -->
  <div class="farm-products scrollbar-hide" ref="farmProductsRef">
    <div class="bg"></div>

    <!-- 搜索区域（逻辑不变） -->
    <el-form inline style="margin-left: 20px">
      <el-form-item style="width: 300px">
        <el-input
          :prefix-icon="Search"
          v-model="params.keyword"
          clearable
          class="w-50"
          placeholder="农产品名称"
          @keyup.enter="onSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="success" plain @click="onSearch">搜索</el-button>
        <el-button @click="restore" plain>重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 商品列表（逻辑不变） -->
    <div class="nr">
      <div
        v-for="(product, index) in productList"
        :key="product.productId"
        @click="farmProductsDetail.handleOpen(product)"
        class="product-card"
      >
        <ProductCard
          :url="productImageList[index][0]?.imageUrl || ''"
          :productName="product.productName"
          :price="product.price"
        />
      </div>
    </div>

    <!-- 加载状态提示（逻辑不变） -->
    <div class="loading" v-if="isLoading && !noMoreData">加载中...</div>
    <div class="no-more" v-if="noMoreData">已加载全部内容</div>
  </div>
  <FarmProductsDetail ref="farmProductsDetail" />
</template>

<style lang="scss" scoped>
.farm-products {
  padding: 0 40px;
  height: calc(100vh - 180px); /* 示例：高度=视口高度-40px，可根据需求调整 */
  overflow-y: auto; /* 仅垂直方向滚动，水平方向不滚动 */
  overflow-x: hidden;
  position: relative; /* 可选：用于调试信息定位 */

  .bg {
    height: 22vh;
    background: url("@/assets/tp2.png") no-repeat 50% center / 300px auto,
      url("@/assets/tp1.jpg") no-repeat center / cover;
    border-radius: 5px;
    margin-bottom: 15px;
  }

  .nr {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, minmax(80px, 200px));
    gap: 10px;
  }
  .product-card {
    width: 100%;
  }

  .loading,
  .no-more {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    color: #6b7280;
  }

  .debug-info {
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    font-size: 12px;
    z-index: 1000;
  }
}
</style>
